<template>
    <z-paging ref="paging" v-model="list" @query="queryList">
        <template #top>
            <!-- 自定义导航栏 -->
            <u-navbar isBack title="我的合同" title-bold>
                <template #right>
                    <view class="u-margin-right-20" @click="sign" v-if="tabIndex === 1 && showBtn">去签约 </view>
                </template>
            </u-navbar>
            <me-tabs v-model="tabIndex" @change="tabChange" :tabs="tabs"></me-tabs>
        </template>
        <view class="container">
            <!-- 数据列表 -->
            <view class="items" v-for="(item, index) in list" :key="index">
                <view class="u-flex u-row-between">
                    <view class="contract-type">{{ item.contractTypeName }}</view>
                    <view class="contract-date">{{ item.contractSignTime }}</view>
                </view>
                <view class="contract-code">{{ item.contractCode }}</view>
                <view class="contract-range">
                    <view class="u-flex u-row-between" v-if="item.contractStatus != 1">
                        <view>开始时间： {{ $u.$timeUtil.formatDate(item.contractStartDate, 'yyyy-MM-dd') }}</view>
                        <view>结束时间： {{ $u.$timeUtil.formatDate(item.contractEndDate, 'yyyy-MM-dd') }}</view>
                    </view>
                    <view class="contract-status">
                        <view v-if="item.contractStatus == 0" class="status-ready">待签约</view>
                        <view v-if="item.contractStatus == 1" class="status-ready u-flex u-row-between">
                            <view>签约中</view>
                            <view @click="continue2sign">继续签约</view>
                        </view>
                        <view v-if="item.contractStatus == 2" class="status-deal">已签约</view>
                        <view v-if="item.contractStatus == 3" class="status-down">已到期</view>
                    </view>
                </view>
                <view class="action-bar u-flex u-row-between u-col-center" v-if="item.contractStatus != 1" @click="showPic(item.contractPic)">
                    <view class="action">预览合同</view>
                    <view class="icon icon-right u-font-24"></view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/store'
import global from '@/config'

const tabIndex = ref(0)

const showBtn = ref(false)

const list = ref<Array<any>>([])

const tabs = ref([
    { name: '授信合同', type: 1 },
    { name: '采购合同', type: 0 }
])

const userStore = useUserStore()

const paging: any = ref(null)

const $u = computed(() => {
    return uni.$u
})

onLoad((option: any) => {
    if (option?.switch) tabIndex.value = 1
})
onMounted(() => {
    uni.$u.$api.MerchantApi.showSignButn({ merchantId: userStore.userInfo.merchantId }).then((res: any) => {
        if (res) showBtn.value = true
    })
})
const sign = () => {
    uni.$u.$MRouter.webView.to({ type: tabIndex.value })
}

const queryList = (pageNo: number) => {
    // 查询该商户 授信合同 和 采购合同是否 正常
    let type = tabs.value[tabIndex.value].type

    let para = {
        merchantId: userStore.userInfo.merchantId,
        contractType: type
    }
    console.log('参数: ', para);
    uni.$u.$api.MerchantApi.queryMerchantContractPic(para)
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

const showPic = (id: string) => {
    // #ifdef APP-PLUS
    uni.showLoading({
        title: '正在打开...',
        mask: true
    })
    uni.downloadFile({
        url: `${global.CertificateFile}${id}`,
        success: function (res) {
            console.log(res)
            var filePath = res.tempFilePath
            uni.openDocument({
                filePath: filePath,
                success(res) {
                    uni.hideLoading()
                },
                fail(err) {
                    console.log(err)
                    uni.$u.toast(err.errMsg)
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 1500)
                }
            })
        },
        fail: err => {
            console.log(err)
            uni.hideLoading()
        }
    })
    // #endif
    // #ifdef H5
    uni.$u.toast('请在手机端尝试')
    // #endif
}
/** 签约未完成 继续签约 */
const continue2sign = () => {
    let type = tabIndex.value
    uni.$u.$MRouter.webView.to({type})
}

const tabChange = () =>{
    paging.value?.reload()
}
</script>

<style scoped lang="scss">
.items {
        background: $uni-bg-color;
        border-radius: 10rpx;
        padding: 20rpx 30rpx;
        margin-top: 20rpx;

        .contract-type {
            font-size: 26rpx;
            line-height: 37rpx;
        }

        .contract-date {
            font-size: 20rpx;
            color: #999999;
            line-height: 28rpx;
        }

        .contract-code {
            font-size: 28rpx;
            color: #1577ff;
            line-height: 48rpx;
        }

        .contract-range {
            font-size: 24rpx;
            color: #999999;
            line-height: 48rpx;
        }

        .contract-status {
            .status-ready {
                color: $uni-bg-color;
                border-radius: 2rpx;
                background: #fda603;
                line-height: 40rpx;
                padding: 4rpx 8rpx;
            }

            .status-deal {
                line-height: 40rpx;
                color: #ffcc66;
                border-radius: 2rpx;
                border: 1rpx solid #ffcc66;
                padding: 4rpx 8rpx;
            }

            .status-down {
                color: $uni-bg-color;
                line-height: 40rpx;
                background: $uni-color-error;
                border-radius: 2rpx;
                padding: 4rpx 8rpx;
            }
        }

        .action-bar {
            .action {
                font-size: 26rpx;
                color: #1577ff;
                line-height: 80rpx;
            }
        }
    }
</style>
